<template>
    <div class="log-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" border ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-select placeholder="执行情况" v-model="queryData.execState" clearable>
                                    <el-option
                                        v-for="(value, key) in ExecState"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                        clearable
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width: 320px">
                                <el-date-picker
                                    v-model="logTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="操作时间起"
                                    end-placeholder="操作时间止"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    :default-time="defaultTime"
                                    @change="changeDataPicker"
                                    clearabl
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column prop="action" label="动作" show-overflow-tooltip />
                <el-table-column prop="logType" label="任务/行为/事件名称" show-overflow-tooltip />
                <el-table-column prop="logValue" label="内容" show-overflow-tooltip />
                <el-table-column prop="logTime" label="操作时间" show-overflow-tooltip />
                <el-table-column label="执行情况" show-overflow-tooltip>
                    <template #default="scope">
                        <span class="table-item-status" :status="ExecState[scope.row.execState]">
                            {{ ExecState[scope.row.execState] }}
                        </span>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { IoTDeviceService } from '@great/services';
import { ExecState } from '@/utils/constant';
import { DataGrid, Block, type DataGridInstance } from '@great/components';
const props = defineProps<{
    detailData?: Record<string, any>;
}>();

const logTime = ref([
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 00:00:00`,
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} ${new Date().toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false // 禁用12小时制
    })}`
]);
// 查询条件
const queryData = ref({
    deviceId: props.detailData?.id,
    execState: '',
    beginLogTime: logTime.value[0],
    endLogTime: logTime.value[1]
});
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTDeviceService.getDeviceLog({
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});
const changeDataPicker = () => {
    if (logTime.value && logTime.value.length) {
        queryData.value.beginLogTime = logTime.value[0];
        queryData.value.endLogTime = logTime.value[1];
    } else {
        queryData.value.beginLogTime = '';
        queryData.value.endLogTime = '';
    }
};
</script>
<style scoped lang="scss">
.log-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='待执行'] {
            &::before {
                background-color: #b3d1ff;
            }
        }
        .table-item-status[status='执行中'] {
            &::before {
                background-color: #409eff;
            }
        }
        .table-item-status[status='执行成功'] {
            &::before {
                background-color: #67c23a;
            }
        }
        .table-item-status[status='执行失败'] {
            &::before {
                background-color: #f56c6c;
            }
        }
        .table-item-status[status='执行超时'] {
            &::before {
                background-color: #e6a23c;
            }
        }
        .table-item-status[status='已取消'] {
            &::before {
                background-color: #909399;
            }
        }
    }
}
</style>
